Homepage redesign #2373

arghmatey · 2021-10-18T18:51:31Z

What changes did you make and why did you make them ?

Developed the plans for our Homepage redesign based on the given Figma designs. At the time this draft was created, not all home page wins have been selected.

Screenshots of Proposed Changes Of The Website (if any, please do not screen shot code changes)

Screenshots will be updated ASAP.

Visuals before changes are applied

Desktop
Mobile

Visuals after changes are applied

Desktop
Mobile

github-actions · 2021-10-18T18:52:11Z

Want to review this pull request? Take a look at this documentation for a step by step guide!

From your project repository, check out a new branch and test the changes.

git checkout -b arghmatey-home-page-redesign gh-pages
git pull https://github.com/arghmatey/website.git home-page-redesign

ExperimentsInHonesty · 2021-11-28T19:07:55Z

@arghmatey Can you provide a screenshot of the new homepage. If you don't already have the full page screen shot chrome extension, please install to make it easier.

arghmatey · 2021-12-01T01:20:07Z

I've added before and after pictures of homepage. I've included both desktop and mobile.

R-Tomas-Gonzalez · 2021-12-05T22:22:03Z

Hi @arghmatey / Sarah!

First off, great job building out such a big task. @macho-catt and I had the chance to look over your code today and I really enjoyed getting to do that with him. The new homepage redesign looks great!

Here are notes and things for you to fix:
Files:

_sass/components/_home.scss - Please use the $absolute_url variable on line 30 in the background property for the .hero--header class similar to line 49
assets/js/home.js - Please utilize the _wins-data.json file and not the wins-data.json file for pulling in data. Here is the file that should be used for any js utilized. wins-data.json will soon be deprecated.

Questions, notes, design fixes:
Sections:

Program Areas - This may be a question for design, but each program has a hover effect, and a pointer cursor as if to convey a link to its page. Is this the intention? If not, please remove any effect upon hover.
Technology Section - There is an underline under the word "technology" that cuts off at the "gy". In the design, the line goes underneath the entire word. Might be worth checking with design on...
Ready to Join Us? - Please make sure "Join Us?" is under "Ready to". Also, please leave the "?" without an underline - per the design.

Please let us know if you have any questions at all. Matt has also pinged you on slack concerning some merge conflicts.

Thanks for your time!

Cheers,

Tomas Gonzalez - Slack DM

arghmatey · 2021-12-06T01:44:41Z

@R-Tomas-Gonzalez - Thanks for the review and feedback!

@macho-catt and I were able to resolve the merge conflicts.

_sass/components/_home.scss - Please use the $absolute_url variable on line 30 in the background property for the .hero--header class similar to line 49

^ Done! Thanks for catching this.

assets/js/home.js - Please utilize the _wins-data.json file and not the wins-data.json file for pulling in data. Here is the file that should be used for any js utilized. wins-data.json will soon be deprecated.

^ I've updated the js file to utilize _wins-data.json and have refactored the js to display the chosen homepage wins at random.

Program Areas - This may be a question for design, but each program has a hover effect, and a pointer cursor as if to convey a link to its page. Is this the intention? If not, please remove any effect upon hover.

^ This hover effect is intentional as noted on the Figma design here. They should now link to the program area page with the corresponding area at the top.

Technology Section - There is an underline under the word "technology" that cuts off at the "gy". In the design, the line goes underneath the entire word. Might be worth checking with design on...

^ Since the last two letters have descenders, this seems unavoidable. I'll let Kristine know through slack.

Ready to Join Us? - Please make sure "Join Us?" is under "Ready to". Also, please leave the "?" without an underline - per the design.

^ Condensed header, removed the "?" from link, and added inline styling to keep it red.

Please let me know if you find any other changes or questions!

R-Tomas-Gonzalez

Hi @arghmatey,

Thanks so much for all your hard work! Would you please mind changing these issues @macho-catt and I caught?

Desktop View
Hero: Hide the "Learn More" hyperlink until the about page is fixed. Commenting it out should be sufficient. (We'll make another issue once that page is done)

Wins: The hyperlink is linked incorrectly. It should link to hackforla.org/wins

Mobile View
Header Nav: Something strange is happening on the dev view for the nav bar. There is a weird grayish color on the hamburger button. And, when the dropdown menu is activated there is a tiny space between the header nav and the dropdown. There are two things to create a quick fix for them.

Change the main-header-content to be 40px. This will close the gap between the header and dropdown.
Please utilize the $color-white variable in the background color for the component utilizing the burger-image id.

Thanks again,

Tomas

arghmatey · 2021-12-10T10:53:03Z

Hey @R-Tomas-Gonzalez -

I've removed the link leading to the About page, and the nav link leading there as well. I've also fixed the wins page link.

For the hamburger nav: I did a deep dive and found I removed code from the _home.scss file that #burgerImage was using. I've applied the missing background color and margin to #burgerImage to resolve the issue. Photos of live site and localhost attached.

Live

Local

Please let me know if there's anything else that could be improved! Though just a heads up - I will be out of town next week. Thank you!

Sarah

R-Tomas-Gonzalez · 2021-12-12T19:39:42Z

Hey @R-Tomas-Gonzalez -

I've removed the link leading to the About page, and the nav link leading there as well. I've also fixed the wins page link.

For the hamburger nav: I did a deep dive and found I removed code from the _home.scss file that #burgerImage was using. I've applied the missing background color and margin to #burgerImage to resolve the issue. Photos of live site and localhost attached.

Live

Local

Please let me know if there's anything else that could be improved! Though just a heads up - I will be out of town next week. Thank you!

Sarah

This is great! Thanks again. Changes look good and I have nothing else at the moment. @macho-catt may you take a second look when you get the chance?

Cheers,

Tomas

macho-catt

LGTM. Thanks for all your hard work on this!

* Adds communities of practice icons * Adds COP icons to credits * Links icons to CoP yml * Update nav link * Add communities icons for home page * create new contact use section * create new hero section of home page * create home page communities section * create home page join us section * create mvp for home page program areas * Adds anchor for home page links * adds new home page technology section * create home page wins section with wins card * restyles home age for redesign * Update program areas images * Add border radius to containers * Update padding on embrace section * Hero mobile design * Remove join text on mobile view * Fix join text on tablet-up * Remove contact text on mobiel view * Develop mobile technologies section' * Fix header padding * Update hero CoP icons credits links * Update hero CoP icons credits links * Communities section mobile version * Create small button element * Final communities section gradient fix * Random homepage win logic: * Hide horizontal sidebars to match design * Reposition homepage win overlay * Resolve filename typo * Change dataKey to match JSON variable * Reposition home join us header * Update photo for Civic Tech Infrastructure * Use new _wins-data * Update image link to use absolute_url variable * Add homepage program areas links * Refactor home wins js for _wins-data * Disable link leading to about page * Fix broken link path * Remove about page link from main nav * Move nav button styling to appropriate selector Co-authored-by: Sarah W <[email protected]>

* Homepage redesign (hackforla#2373) * Adds communities of practice icons * Adds COP icons to credits * Links icons to CoP yml * Update nav link * Add communities icons for home page * create new contact use section * create new hero section of home page * create home page communities section * create home page join us section * create mvp for home page program areas * Adds anchor for home page links * adds new home page technology section * create home page wins section with wins card * restyles home age for redesign * Update program areas images * Add border radius to containers * Update padding on embrace section * Hero mobile design * Remove join text on mobile view * Fix join text on tablet-up * Remove contact text on mobiel view * Develop mobile technologies section' * Fix header padding * Update hero CoP icons credits links * Update hero CoP icons credits links * Communities section mobile version * Create small button element * Final communities section gradient fix * Random homepage win logic: * Hide horizontal sidebars to match design * Reposition homepage win overlay * Resolve filename typo * Change dataKey to match JSON variable * Reposition home join us header * Update photo for Civic Tech Infrastructure * Use new _wins-data * Update image link to use absolute_url variable * Add homepage program areas links * Refactor home wins js for _wins-data * Disable link leading to about page * Fix broken link path * Remove about page link from main nav * Move nav button styling to appropriate selector * Sm 1 feature homepage launch (#18) * Update meeting data * Update meeting data * Update contributor and language data * Added few points to issue progression action item Added few points to issue progression action item * Update meeting data * Update contributor and language data * Update meeting data * Update contributor and language data * Update meeting data * Update contributor and language data * Update add labels trigger hackforla#2939 (hackforla#3042) * Update add-labels-template.md * Update add-labels-template.md Rearranged original note * Update open-community-survey.md * Updated pre-work developer template * Changed typo in _projects/home-unite-us.md from 'non-profits' to 'nonprofits'. (hackforla#3062) * Update meeting data * Update contributor and language data * fixed the spelling of sustainability (hackforla#3067) * Update pre-work dev issue template * Update meeting data * Update contributor and language data * Update issue templates Added Wiki: Research Plan Review: [REPLACE WITH NAME OF PAGE] * Updated Project Profile Card review and update issue template * Update issue templates updated designer time * Updated Credits file template: Edit content field and remove type field * Updated Credits file template: Edit content field and remove type field * Update meeting data * Update contributor and language data * Fix misspelling of "community" on line 93 of pages/join-us.html (hackforla#3072) * Update meeting data * Update contributor and language data * Added feature-tech-dropdown branch * Update meeting data * Added feature-tech-dropdown branch * Added feature-tech-dropdown branch * Update contributor and language data * changed the spelling from webapp to web app on line 56 (hackforla#3073) * Update meeting data * Update contributor and language data * Revert " changed the spelling from webapp to web app on line 56 (hackforla#3073)" (hackforla#3078) This reverts commit f6deeff. * Update meeting data * Update contributor and language data * Update meeting data * Update contributor and language data * Edit content field and remove type field from avatar.yml credits file 2793 (hackforla#3079) * Delete unused project-filter.js file (hackforla#3081) * Update meeting data * Update contributor and language data * Update meeting data * Update contributor and language data * fixed spelling of non-profit to nonprofit, line 77, join-us.html (hackforla#3076) * fixed spelling of non-profit to nonprofit, line 77, join-us.html * Update meeting data * Update contributor and language data * Update meeting data * Update contributor and language data * Add so go survey credit page 3022 (hackforla#3043) * add new headers and tools section to credit page * updated to empty alt tags for tools section * fix snytax errors * fix spacing in code and website page * Fix indentation and add functionality for additional teams in "By:" field * Update meeting data * Update contributor and language data * Update meeting data * Update contributor and language data * Update meeting data * Update contributor and language data * Update meeting data * Update contributor and language data * Edited items on how to pick up your first issue. Edited items on how to pick up your first issue. * Create new Privacy Policy page and its credit, and edit label (hackforla#3083) * Added privacy-policy.jpg * Add privacy-policy.yml to credits * Added initial privacy-policy scss and html files * Added header and overview section * Redoing the html page from scratch * Added a line in main.scss to import privacy-policy.scss * Added header section * Added the content for section Visiting HackforLA.org * Added content for section Email Addresses * Added content for Google Analytics section * Added content up through and including Third party service providers section * Finished adding all the content in the HTML file * Moved the import of privacy-policy.scss to the bottom of the components section Reason is it didn't make sense that I just put it in the middle on the components section without any reason. * Added styling for desktop version of page * Added mobile styling and finished desktop styling * Updated privacy-policy.yml credit * Fixed styling * Fixed styling * Added spacing before the address on the bottom of the page * Clarified "Project Profile Card review and update" template * Update meeting data * Update contributor and language data Co-authored-by: GitHub Actions Bot <[email protected]> Co-authored-by: Saumil Dhankar <[email protected]> Co-authored-by: Poorvi Rao <[email protected]> Co-authored-by: Bonnie Wolfe <[email protected]> Co-authored-by: Wilny Duong <[email protected]> Co-authored-by: gardenqu <[email protected]> Co-authored-by: Simone Campbell <[email protected]> Co-authored-by: Trisha Johnson <[email protected]> Co-authored-by: Erick Odero <[email protected]> Co-authored-by: Devin Krizwold <[email protected]> Co-authored-by: Matthew Arofin <[email protected]> Co-authored-by: Jay Barbanel <[email protected]> Co-authored-by: Jaret Balba <[email protected]> Co-authored-by: Sarah W <[email protected]> Co-authored-by: GitHub Actions Bot <[email protected]> Co-authored-by: Saumil Dhankar <[email protected]> Co-authored-by: Poorvi Rao <[email protected]> Co-authored-by: Bonnie Wolfe <[email protected]> Co-authored-by: Wilny Duong <[email protected]> Co-authored-by: gardenqu <[email protected]> Co-authored-by: Simone Campbell <[email protected]> Co-authored-by: Trisha Johnson <[email protected]> Co-authored-by: Erick Odero <[email protected]> Co-authored-by: Devin Krizwold <[email protected]> Co-authored-by: Matthew Arofin <[email protected]> Co-authored-by: Jay Barbanel <[email protected]> Co-authored-by: Jaret Balba <[email protected]>

* Adds communities of practice icons * Adds COP icons to credits * Links icons to CoP yml * Update nav link * Add communities icons for home page * create new contact use section * create new hero section of home page * create home page communities section * create home page join us section * create mvp for home page program areas * Adds anchor for home page links * adds new home page technology section * create home page wins section with wins card * restyles home age for redesign * Update program areas images * Add border radius to containers * Update padding on embrace section * Hero mobile design * Remove join text on mobile view * Fix join text on tablet-up * Remove contact text on mobiel view * Develop mobile technologies section' * Fix header padding * Update hero CoP icons credits links * Update hero CoP icons credits links * Communities section mobile version * Create small button element * Final communities section gradient fix * Random homepage win logic: * Hide horizontal sidebars to match design * Reposition homepage win overlay * Resolve filename typo * Change dataKey to match JSON variable * Reposition home join us header * Update photo for Civic Tech Infrastructure * Use new _wins-data * Update image link to use absolute_url variable * Add homepage program areas links * Refactor home wins js for _wins-data * Disable link leading to about page * Fix broken link path * Remove about page link from main nav * Move nav button styling to appropriate selector Co-authored-by: Sarah W <[email protected]>

A + squash merge into gh-pages * Adds communities of practice icons * Adds COP icons to credits * Links icons to CoP yml * Update nav link * Add communities icons for home page * create new contact use section * create new hero section of home page * create home page communities section * create home page join us section * create mvp for home page program areas * Adds anchor for home page links * adds new home page technology section * create home page wins section with wins card * restyles home age for redesign * Update program areas images * Add border radius to containers * Update padding on embrace section * Hero mobile design * Remove join text on mobile view * Fix join text on tablet-up * Remove contact text on mobiel view * Develop mobile technologies section' * Fix header padding * Update hero CoP icons credits links * Update hero CoP icons credits links * Communities section mobile version * Create small button element * Final communities section gradient fix * Random homepage win logic: * Hide horizontal sidebars to match design * Reposition homepage win overlay * Resolve filename typo * Change dataKey to match JSON variable * Reposition home join us header * Update photo for Civic Tech Infrastructure * Use new _wins-data * Update image link to use absolute_url variable * Add homepage program areas links * Refactor home wins js for _wins-data * Disable link leading to about page * Fix broken link path * Remove about page link from main nav * Move nav button styling to appropriate selector Co-authored-by: Sarah W <[email protected]>

arghmatey added 15 commits September 29, 2021 12:47

Adds communities of practice icons

d876734

Adds COP icons to credits

fe2c583

Links icons to CoP yml

4a4a793

Update nav link

45ab514

Add communities icons for home page

5c27225

create new contact use section

c4b9518

create new hero section of home page

de727fa

create home page communities section

1a66691

create home page join us section

c3fd0d4

create mvp for home page program areas

dbf9475

Adds anchor for home page links

bc98ad5

adds new home page technology section

50ed76e

create home page wins section with wins card

35fbc2b

restyles home age for redesign

f1f6119

Merge branch 'gh-pages' into home-page-redesign

33deb21

github-actions bot added P-Feature: Home page https://www.hackforla.org/ role: front end Tasks for front end developers Complexity: Large labels Oct 18, 2021

arghmatey added 11 commits October 22, 2021 10:06

Update program areas images

ae26a84

Add border radius to containers

b6e7378

Update padding on embrace section

bee5d4b

Hero mobile design

d98c4d0

Remove join text on mobile view

9d78506

Fix join text on tablet-up

617737d

Remove contact text on mobiel view

75aa472

Develop mobile technologies section'

114271c

Fix header padding

17db18d

Update hero CoP icons credits links

cc824c9

Update hero CoP icons credits links

38f1fab

arghmatey force-pushed the home-page-redesign branch from 83e9a9f to bde938b Compare December 6, 2021 00:34

arghmatey added 7 commits December 5, 2021 16:36

Change dataKey to match JSON variable

751e85a

Reposition home join us header

440ffc9

Update photo for Civic Tech Infrastructure

b707762

Use new _wins-data

a115c29

Update image link to use absolute_url variable

96d61eb

Add homepage program areas links

9809e26

Refactor home wins js for _wins-data

f4c5bb8

R-Tomas-Gonzalez suggested changes Dec 9, 2021

View reviewed changes

arghmatey added 3 commits December 10, 2021 02:04

Disable link leading to about page

dfaf2f9

Fix broken link path

bb806f6

Remove about page link from main nav

1979148

Move nav button styling to appropriate selector

4303382

R-Tomas-Gonzalez approved these changes Dec 12, 2021

View reviewed changes

ExperimentsInHonesty added the Feature: Feature Branch Requires Branching off a Feature Branch instead of gh-pages label Dec 12, 2021

macho-catt approved these changes Dec 15, 2021

View reviewed changes

macho-catt merged commit 467a797 into hackforla:feature-homepage-launch Dec 15, 2021

JessicaLucindaCheng mentioned this pull request Sep 21, 2022

feature-homepage-launch branch: Fix projects' info pages' styling of the header #3377

Closed

11 tasks

jdingeman mentioned this pull request Mar 15, 2023

Wins Randomizer for About page #4190

Open

9 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Homepage redesign #2373

Homepage redesign #2373

arghmatey commented Oct 18, 2021 •

edited

Loading

github-actions bot commented Oct 18, 2021

ExperimentsInHonesty commented Nov 28, 2021

arghmatey commented Dec 1, 2021

R-Tomas-Gonzalez commented Dec 5, 2021

arghmatey commented Dec 6, 2021

R-Tomas-Gonzalez left a comment

arghmatey commented Dec 10, 2021

R-Tomas-Gonzalez commented Dec 12, 2021

macho-catt left a comment

Homepage redesign #2373

Homepage redesign #2373

Conversation

arghmatey commented Oct 18, 2021 • edited Loading

What changes did you make and why did you make them ?

Screenshots of Proposed Changes Of The Website (if any, please do not screen shot code changes)

github-actions bot commented Oct 18, 2021

ExperimentsInHonesty commented Nov 28, 2021

arghmatey commented Dec 1, 2021

R-Tomas-Gonzalez commented Dec 5, 2021

arghmatey commented Dec 6, 2021

R-Tomas-Gonzalez left a comment

Choose a reason for hiding this comment

arghmatey commented Dec 10, 2021

R-Tomas-Gonzalez commented Dec 12, 2021

macho-catt left a comment

Choose a reason for hiding this comment

arghmatey commented Oct 18, 2021 •

edited

Loading